<template>
	<view class="situation">

		<up-tabs :list="tabsList" @click="clicktabFn" style="width: 100%;" :lineWidth='40' lineColor='#40d2d3'
			:scrollable='false'></up-tabs>
		<view class="">
			<view class="charts-box" v-if="currentIndex==0">
				<patientProportion ></patientProportion>
			</view>
			<view class="charts-box" v-if="currentIndex==1">
				<diseaseCount></diseaseCount>
			</view>
		</view>
		<!-- <Empty :text='暂无任务'></Empty> -->
	</view>
</template>
<script setup>
	import {
		reactive,
		ref,
		toRefs,
		onMounted,
		toValue
	} from 'vue';
	import patientProportion from '@/pages/dataAnalysis/components/patientProportion/patientProportion.vue';
	import diseaseCount from '@/pages/dataAnalysis/components/diseaseCount/diseaseCount.vue';
	import Empty from '../../components/empty.vue';
	const state = reactive({
		tabsList: [{
				name: '患者比例',
				component: 'patientProportion'
			},
			{
				name: '疾病统计',
				component: 'diseaseCount'
			},
			{
				name: '总体情况',
				component: 'overall'
			},
		]
	})
	// 点击tabs切换的小标
	const currentIndex = ref(0)
	// 患者比列数据
	const {
		tabsList
	} = toRefs(state)

	const clicktabFn = (index, item) => {
		currentIndex.value = item
		console.log(currentIndex.value)
	}
	onMounted(() => {

	})
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		width: 100%;
		display: flex;
	}

	.situation {
		flex: 1;

		.content {}
	}


	.noData {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		color: #c0c0c0;

		image {
			width: 360rpx;
			height: 360rpx;
		}

		.text {
			margin-top: 20rpx;
		}
	}

	.charts-box {
		width: 100%;
		height: 400px;
	}
	.charts1{
		opacity: 0;
	}
	.charts2{
		opacity: 1;
	}
</style>